<template>
	<app-layout>
	<view class="con-box" style="background: rgba(7,163,6,0.09);">
		<view class="">
			<view class="con-info">
				<!-- 个人信息 -->
				<view class="info-inner" @click="gotoUpdateUser">
					<view class="info-avatar">
						<image class="avatar-image" :class="[souser.identity.member_level > 0 ? 'is_vip' : 'avatarimg']"
							:src="souser.avatar" mode="">
						</image>
						<image class="vip_icon" v-if="souser.identity.member_level > 0"
							src="/static/image/vip_icon.png"></image>
					</view>
					<view class="info-some">
						<view class="info-name u-line-2">
							{{souser.nickname}}
						</view>
						<!-- <view class="progress-bar" v-if="souser.identity.member_level == 0">
							进度条
						</view> -->
						<view class="progress-bar" v-if="souser.identity.member_level == 0">
							<view class="progress-line" >
								<view :style="[{'width': consume / 20 + '%'}]"
									class="progress-active">
								</view>
							</view>
							<view>
								消费￥{{ consume }}/￥2000
							</view>
						</view>
						<!-- <view class="info-set" @click="tososet">
							主页设置 >
						</view> -->
					</view>
					<!-- <view class="loginmch" v-if="isbind">
						<view class="" v-if="!isloginmch" @click="tomchlogin">
							登录群主号
						</view>
						<view class="" v-else @click="tomchlogout">
							退出登录
						</view>
					</view> -->
				</view>
			</view>
			<view class="all-center">
				<view class="fenxiao" @click="jump('/plugins/mch_solitaire/order/index/index')">
					<view class="fx-zi">
						我的订单
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
				<view class="fenxiao" @click="jump('/plugins/mch_solitaire/integral/integral')">
					<view class="fx-zi">
						我的金币
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
				<view class="fenxiao" @click="jump('/plugins/mch_solitaire/balance/balance')">
					<view class="fx-zi">
						我的余额
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
				<view class="fenxiao" @click="jump('/plugins/mch_solitaire/coupon/couponlist')">
					<view class="fx-zi">
						我的优惠券
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
				<view class="fenxiao" @click="jump('/plugins/mch_solitaire/address/address')">
					<view class="fx-zi">
						我的收获地址
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
				<view class="fenxiao" @click="goToCart">
					<view class="fx-zi">
						我的购物车
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
			</view>

			<view class="all-center" v-if="isdistri || isloginmch">
				<view class="fenxiao" @click="jump('/plugins/mch_solitaire/profit/profit?uid='+useid)">
					<view class="fx-zi">
						收益
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
				<view class="fenxiao" v-if="isdistri"
					@click="jump('/plugins/mch_solitaire/solist/solist?lauser_id='+distruid+'&distrid='+distrid+'&mcha='+ mcha)">
					<view class="fx-zi">
						分销接龙列表
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
			</view>

			<view class="all-center" v-if="isloginmch">
				<view class="fenxiao" @click="jump('/plugins/mch_solitaire/lasolitaire/lasolitaire?mch_id='+mchid)">
					<view class="fx-zi">
						发布接龙
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
				<view class="fenxiao" @click="jump('/plugins/mch_solitaire/mch/goods/goods?mch_id='+mchid)">
					<view class="fx-zi">
						商品库
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
				<view class="fenxiao" @click="jump('/plugins/mch_solitaire/mch/order/order?mch_id='+mchid)">
					<view class="fx-zi">
						订单管理
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
				<!-- <view class="fenxiao" @click="jump('/plugins/mch_solitaire/mch/order/order?mch_id='+mchid)">
					<view class="fx-zi">
						余额
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view> -->
				<!-- <view class="fenxiao" @click="jump('/plugins/solitaire/census/census?mch_id='+mchid)">
					<view class="fx-zi">
						统计信息
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view> -->
				<!-- <view class="fenxiao" @click="jump('/plugins/solitaire/datainfo/analysis?mch_id='+mchid)">
					<view class="fx-zi">
						数据分析
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view> -->
				<view class="fenxiao"
					@click="jump('/plugins/mch_solitaire/solist/solist?mch_id='+mchid+'&lauser_id='+useid+'&ismineso=true'+'&mcha='+ mcha)">
					<view class="fx-zi">
						接龙管理
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
				<view class="fenxiao" @click="jump('/plugins/mch_solitaire/qr/qrbind?id='+useid)">
					<view class="fx-zi">
						绑定后显示主页
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>
				<view class="fenxiao" @click="jump('/plugins/mch_solitaire/qr/qrdistri?uid='+useid)">
					<view class="fx-zi">
						邀请成为下级分销员
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view>

				<!-- <view class="fenxiao"
					@click="jump('/plugins/mch_solitaire/solist/solist?mch_id='+mchid+'&lauser_id='+useid+'&ismineso=true')">
					<view class="fx-zi">
						生成绑定二维码
					</view>
					<view class="fx-image">
						<image class="arrow" src="/static/image/icon/arrow-right.png"></image>
					</view>
				</view> -->
			</view>

			<!-- <view class="all-box dir-left-wrap cross-center main-between">
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/mch/goods/goods')">
					商品库
				</view>
				<view class="cla-item" v-if="isloginmch"
					@click="jump('/plugins/mch_solitaire/mch/goods-cat/goods-cat')">
					plugins/solitaire/goods/cate
					商品分类管理
				</view>
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/mch/order/order')">
					订单管理
				</view>
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/writeoff/writeoff')">
					核销管理
				</view>
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/census/census')">
					统计信息
				</view>
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/datainfo/analysis')">
					数据分析
				</view>
				<view class="cla-item" v-if="isloginmch" @click="jump('/plugins/mch_solitaire/address/address')">
					提货点
				</view>
				<view class="cla-item">
					参与的接龙
				</view>
				<view class="cla-item" @click="jump('/plugins/mch_solitaire/shop/shop')">
					商品列表
				</view>
			</view> -->
		</view>
		<!-- <view class="rea-btn launch-so" @click="jump('/plugins/mch_solitaire/lasolitaire/lasolitaire')">
			发起接龙
		</view>
		<view class="">
			<view class="reatime">
				<view class="text-orange"></view>
				<view class="action">
					2020.02.27
				</view>
			</view>
			<view class="rea-solitaire" v-for="(list, index) in lists" :key="index">
				<view class="rea-soitem">
					<view class="publisher">
						<image class="avatar" src="/static/image/icon/order/icon-comment.png" mode=""></image>
						<view class="content">
							<view>{{ list.openid.nickName }}</view>
							<view class="create-time">{{ list.create_time }}</view>
						</view>
					</view>
					<view class="rea-content">
						{{ list.content }}
						<image class="b-image" v-if="list.pic" :src="list.pic" mode="aspectFill"></image>
					</view>

					<view v-if="list.comts.length" class="solitaireor">
						<view class="so-item" v-for="(order, ord_in) in list.comts" :key="ord_in">
							<image class="so-avatar" src="/static/image/icon/order/icon-comment.png" mode=""></image>
							<view class="so-content">
								<view class="">{{ order.openid.nickName }}</view>
								<view class="">+1</view>
							</view>
						</view>
					</view>

					<view v-else class="soli-else">
						一大波人正在赶来...
					</view>

					<view class="rea-btn" @click="solit(list.id)">
						我要接龙
					</view>
				</view>
			</view>
		</view> -->

		<!-- <view class="">
			<u-popup v-model="show" mode="center" border-radius="14" @close="show = false" v-if="show">
				<view class="dir-right-nowrap" @click="show = false">
					<image style="width: 56rpx;height: 56rpx;transform: rotate(45deg);margin-bottom: 12rpx;"
						src="/static/image/icon/add.png" mode=""></image>
				</view>
				<view class="model" @touchmove.stop.prevent>
					<view class="" style="text-align: center;font-size: 46rpx;">
						进店消费立送满减券
					</view>
					<view class="" style="text-align: center;font-size: 28rpx;">
						进店消费立送满减券
					</view>
					<view class="dir-left-nowrap cross-center"
						style="background-color: #fff;color: #bdbdbd;font-size: 24rpx;box-shadow: 0rpx 0rpx 0rpx 14rpx rgba(0,0,0,.1);border-radius: 4rpx;padding: 36rpx 24rpx;margin-top: 24rpx;">
						<view class=""
							style="background-color: #fa714d;font-size: 24rpx;color: #fff;width: 276rpx;text-align: center;padding: 36rpx 0;">
							<view class="">
								5
							</view>
							<view class="">
								man66可用
							</view>
						</view>
						<view class="" style="width: 228rpx;margin-left: 24rpx;">
							<view class="">
								进店消费立送满减券
							</view>
							<view class="">
								全部商品可用
							</view>
							<view class="">
								领取后多少天有效
							</view>
						</view>
						<view class="" style="align-self: flex-end;">
							×1
						</view>
					</view>
					<view class=""
						style="margin: 36rpx auto 8rpx;padding: 12rpx 24rpx;background-color: #fff;color: #c7b47a;width: 228rpx;text-align: center;border-radius: 64rpx;font-weight: 300;letter-spacing: 5rpx;">
						领取并使用
					</view>
				</view>
			</u-popup>
		</view> -->
		<view class="" :style="{height:BotHeight + 'rpx'}"></view>
		<!-- <view class="">
			<sol-tab-bar router="/plugins/mch_solitaire/user-center/user-center"></sol-tab-bar>
		</view> -->
	</view>
	</app-layout>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex";
	import uPopup from '../../components/basic-component/u-popup/u-popup.vue';
	// import solTabBar from '../components/sol-tab-bar.vue'
	export default {
		components: {
			uPopup,
			// solTabBar
		},
		onShareAppMessage() {

		},
		data() {
			return {
				souser: {
					nickname: '默认用户',
					avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKqvu8V6kNibld2tEjyatlU5QaeRGQsu2HnE2HGy9RiaZuGGG0V6kibwzhtX5DoLnt6kkuOPzBCyQehg/132'
				},
				show: true,
				isCard: false,
				isloginmch: false, // 是否登录（事业合伙人账号）
				isdistri: false, // 是否绑定成为分销员
				distrid: 0,
				distruid: 0,
				mcha:0,
				mchid: 0,
				useid: 1,
				isbind: false,
				consume:0,
				lists: [
					/* {
					id: 24,
					openid: {
						id: 2,
						nickName: '你猜',
						avatarUrl: 'https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/flk810QttsrSjYs2Tia3c9DjdicNNWX1OMoLkiaYjesciaNuGs6E34cCzMrlrxoRViaWAURwWphHicOyGRfIibaEkhL0w\/132',
						realname: null,
						tel: null,
						address: '',
					},
					buy_date: 'NULL ',
					pic: 'http://wechatupload.shuangxitang.cn/uploads/mall1/202110/20211022/a41274e192136ac8f2c4ca5f9036db05.png',
					content: '大家好，互助下单，疫情之下，邻里和睦',
					is_send: 1,
					is_master: 0,
					comts: [
						// {
						// 	id: 33,
						// 	openid: {
						// 		id: 4,
						// 		nickName: '你猜',
						// 		avatarUrl: 'https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/2lZ9GXssnuO2Bhic4KS0FM03iaah67mkldq864ncskg38mlULmNvON2yVgTOm2oMyHFQNYzrrmeUF7Dvl0OBFv2w\/132',
						// 		realname: null,
						// 		tel: null,
						// 		address: '',
						// 	},
						// 	jl_id: '24',
						// 	address: '2。201',
						// 	name: '你猜',
						// 	tel: '',
						// 	order_status: '0',
						// 	des: '快递在小区门口谢谢'
						// },
						// {
						// 	id: 32,
						// 	openid: {
						// 		id: 2,
						// 		nickName: '你猜',
						// 		avatarUrl: 'https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/flk810QttsrSjYs2Tia3c9DjdicNNWX1OMoLkiaYjesciaNuGs6E34cCzMrlrxoRViaWAURwWphHicOyGRfIibaEkhL0w\/132',
						// 		realname: null,
						// 		tel: null,
						// 	},
						// 	jl_id: '24',
						// 	address: '1-922',
						// 	name: '你猜',
						// 	tel: '',
						// 	order_status: '0',
						// 	des: ''
						// }
					],
					my_orders: [],
					total_orders: 2,
					create_time: '1998-09-01'
				}, */
				]
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
			...mapGetters('iPhoneX', {
				botNavHei: 'getNavHei',
				BotHeight: 'getBotHeight',
			})
		},
		onShow() {
			const self = this;
			// this.loginMchmall()
			self.getInfo()
			self.sologin()
		},
		onLoad() {
			const self = this;
			// self.isbindmall()
			// self.sologin()
			self.getInfo()
		},
		methods: {
			// 去修改界面
			gotoUpdateUser(){
				uni.navigateTo({
					url:'/pages/sixty/user-center/editinfo'
				})
			},
			// 跳转购物车界面
			goToCart(){
				uni.switchTab({
					url:'/pages/newCart/newCart'
				})
			},
			// 判断用户是否绑定商户 绑定可发群接龙（成为事业合伙人）
			sologin: function() {
				const self = this;
				self.$request({
					url: self.$apiSol.mch.login,
					method: 'POST'
				}).then(info => {
					console.log(info);
					if (info.code === 0) {
						self.isloginmch = true
						self.mchid = info.data.mch.id
						uni.setStorageSync("MCHsxt", info.data);
					} else {
						self.isloginmch = false
					}
				}).catch(() => {
					self.$hideLoading();
				})
			},
			async getInfo() {
				let self = this
				const res = await self.$request({
					url: self.$apiSol.user.user_info,
					method: 'get',
				})
				console.log(res);
				if (res.code == 0) {
					self.souser = res.data
					self.useid = res.data.options.user_id
					self.payMsgInfo()
					console.log(res.data.agentuser, 'agentuser');
					// agentuser
					// distrid
					if (res.data.agentuser.length != 0) {
						console.log('/*/*/*****/*****-/');
						this.isdistri = true
						this.distrid = res.data.agentuser.id
						this.distruid = res.data.agentuser.user_id
						this.mcha = res.data.agentuser.mch_id
					}
				}
			},
			// 获取消费信息
			async payMsgInfo(){
				const res =await this.$request({
					url:this.$apiSol.solitaire.consume,
					method:'get',
					data:{
						user_id:this.useid
					}
				})
				console.log("...........",res)
				if(res.data.consumption_price == null){
					return this.consume
				}else{
					this.consume =res.data.consumption_price
				}
				
			},
			isbindmall() {
				// 判断用户是否绑定
				this.$request({
					url: this.$api.wechat_group.whether_binding
				}).then(res => {
					if (res.data.ismallbingding) {
						// this.mall_id = res.data.ismallbingding.id
						this.isbind = true
					} else {
						this.isbind = false
					}
				}).catch(err => {
					this.isbind = false
				})
			},
			loginMchmall() {
				const self = this;
				const mch = uni.getStorageSync('MCHsxt');
				if (!mch) {
					self.isloginmch = false
					/* uni.navigateTo({
						url: '/plugins/mch_solitaire/mch/login/login',
					}) */
					return;
				}
				self.mchid = mch.mch.id;
				console.log(self.mchid);
				console.log(mch);
				/* uni.getStorage({
					key: 'MCHsxt',
					success: res => {
						self.isloginmch = true
						self.mchid = res.data.mch.id
						console.log(res, 'res');
					},
					fail: err => {
						self.isloginmch = false
						console.log(err, 'err');
					}
				}) */
				self.$showLoading({
					title: '登陆中'
				});
				self.$request({
					url: self.$apiSol.mch.manage_index,
					data: {
						mch_id: self.mchid
					}
				}).then(info => {
					self.$hideLoading();
					if (info.code === 0) {
						const detail = info.data.detail;
						if (detail.status === '0') {
							uni.showModal({
								title: '提示',
								content: '店铺已被关闭！请联系管理员',
								showCancel: false,
								success: function(e) {
									self.isloginmch = false
									uni.removeStorageSync('MCHsxt')
									/* if (e.confirm) {
										uni.navigateTo({
											url: '/plugins/mch_solitaire/mch/login/login',
										})
									} */
								}
							});
						} else {
							self.detail = detail;
							self.isloginmch = true
						}
					} else {
						self.isloginmch = false
						/* uni.navigateTo({
							url: '/plugins/mch_solitaire/mch/login/login',
						}) */
					}
				});
			},
			jump(url) {
				let aurl = url
				if (aurl.indexOf('?') == -1) {
					aurl = aurl + '?mch_id=' + this.mchid
				} else {
					aurl = aurl + '&mch_id=' + this.mchid
				}
				uni.navigateTo({
					url: aurl
				})
			},
			solit(item) {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/solitaire/solitaire'
				})
			},
			tososet() {
				uni.navigateTo({
					// url: '/plugins/solitaire/setting/setting' + '?mch_id=' + this.mchid
					url: '/plugins/mch_solitaire/mch/config/config' + '?mch_id=' + this.mchid
				})
			},
			tomchlogin() {
				uni.navigateTo({
					url: '/plugins/mch_solitaire/mch/login/login'
				})
			},
			tomchlogout() {
				uni.removeStorage({
					key: 'MCHsxt'
				});
				this.isloginmch = false
				this.mchid = 0
			}
		}
	}
</script>

<style scoped lang="scss">
	.model {
		background-color: #c7b47a;
		color: #FFFFFF;
		padding: 36rpx;
		width: 702rpx;
		border-radius: 14rpx;
		// text-align: center;
	}

	.con-box {
		width: 100%;
		// padding: 0 24rpx;
	}

	.con-info {
		padding: 24rpx 24rpx 0;
		margin: 0 auto 24rpx;

		.info-inner {
			border-radius: 16rpx;
			background: #FFFFFF;
			padding: 24rpx;
			display: flex;
			align-items: center;

			.info-avatar {
				// width: 150rpx;
				// height: 150rpx;
				border-radius: 50%;
				// border: 6rpx solid #f9f9f9;
				position: relative;

				.is_vip {
					border: #{8rpx} solid #ffe993;
				}

				.avatarimg {
					border: #{8rpx} solid #f9f9f9;
				}

				.vip_icon {
					position: absolute;
					right: -24rpx;
					top: -12rpx;
					width: 58rpx;
					height: 57rpx;
				}

				.avatar-image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}
			}

			.info-some {
				margin-left: 32rpx;
				width: 332rpx;

				.info-name {
					font-size: 32rpx;
					font-weight: 700;
				}

				.info-set {
					margin-top: 6rpx;
					font-size: 24rpx;
					color: #888888;
				}

				.progress-bar {
					font-size: 20rpx;
					margin-top: 12rpx;

					.progress-line {
						height: #{10rpx};
						border-radius: 50rpx;
						margin-bottom: #{5rpx};
						background-color: #e2f0e2;
						position: relative;
					}

					.progress-active {
						height: #{10rpx};
						border-radius: #{5rpx};
						background-color: #09ba07;
						position: absolute;
						max-width: 100%;
						left: 0;
						top: 0;
					}
				}
			}

			.loginmch {
				font-size: 28rpx;
				text-align: right;
			}
		}
	}

	.all-box {
		// width: 702rpx;
		// margin: 0 auto;
		width: 100%;
		padding: 24rpx;
		background-color: #FFFFFF;
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;

		.cla-item {
			padding: 0 24rpx;
		}
	}

	.rea-btn {
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
		background-color: #09ba07;
		border-radius: 72rpx;
		margin: 24rpx auto;
	}

	.launch-so {
		// padding: 0 24rpx;
		width: 702rpx;
	}

	.reatime {
		margin-top: 30rpx;
		margin-left: 24rpx;
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;

		.text-orange {
			display: inline-block;
			background: #f37b1d;
			width: 8rpx;
			height: 28rpx;
		}

		.action {
			margin-left: 30rpx;
			font-size: 30rpx;
			margin-right: 30rpx;
		}
	}

	.rea-solitaire {
		padding: 24rpx;

		.rea-soitem {
			border-radius: 16rpx;
			background: #FFFFFF;
			padding: 24rpx;
		}

		.rea-content {
			font-size: 28rpx;

			.b-image {
				width: 100%;
				height: 200rpx;
			}
		}

		.rea-btn {
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			background-color: #09ba07;
			border-radius: 72rpx;
			margin: 24rpx auto;
		}

		.publisher {
			display: flex;
			padding-right: 10rpx;
			height: 140rpx;
			background-color: #ffffff;
			align-items: center;

			.avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}

			.content {
				width: calc(100% - 96rpx - 60rpx - 20rpx);
				font-size: 26rpx;
			}

			.create-time {
				font-size: 24rpx;
				color: #aaaaaa;
			}
		}
	}

	.solitaireor {
		font-size: 28rpx;

		.so-item {
			display: flex;
			align-items: center;

			.so-avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}

			.so-content {
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				flex: 1;
			}
		}
	}

	.soli-else {
		font-size: 28rpx;
		color: #888888;
		text-align: center;
		line-height: 60rpx;
	}

	.all-center {
		width: 702rpx;
		margin: 24rpx auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
	}

	.fenxiao {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

		&:last-child {
			border: none;
		}

		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;

		.fx-image {
			width: 12rpx;
			height: 22rpx;

			.arrow {
				width: 12rpx;
				height: 22rpx;
			}
		}
	}
</style>
